<script setup lang="tsx">
import {  onUnmounted, ref } from 'vue'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css' // Leaflet 样式
import 'leaflet.tilelayer.colorfilter' // 先暂时去掉 colorFilter 测试

const props = defineProps({
  title: { type: String, required: true }
})

const mapContainer = ref<HTMLElement | null>(null)
const map = ref<L.Map | null>(null)

// const osmUrl = '/cy/base/{z}/{x}/{y}.png'

const osmUrl = 'http://172.18.255.11:8080/tile/{z}/{x}/{y}.png'
const osm = L.tileLayer(osmUrl, {
  subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
})

const init = (latitude, longitude) => {
  if (!mapContainer.value) return
  map.value = L.map(mapContainer.value, {
    center: [39.9042, 116.4074],
    zoom: 10,
    minZoom: 10,
    maxZoom: 15,
    attributionControl: false,
    zoomControl: false
  })

  osm.addTo(map.value)
  map.value.invalidateSize()
  L.marker([latitude, longitude]).addTo(map.value).bindPopup(props.title)
  map.value.setView([latitude, longitude], 10)
}

onUnmounted(() => {
  if (map.value) {
    map.value.remove()
    map.value = null
  }
})

defineExpose({
  init
})
</script>

<template>
  <div ref="mapContainer" id="map"></div>
</template>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>
